<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>库存查询</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <style>
        .input1{
            margin-left: 5px;
            margin-right: 10px;
        }
        .rightTd{
            margin-left: 30px;
        }
    </style>
</head>
<body>
<div id="app">
    商品编号：<el-input v-model="ioNo" placeholder="请输入商品编号" class="input1" style="width: 10%"></el-input>
    仓库名称：<template>
                    <el-select v-model="WName" placeholder="请选择仓库名称">
                        <el-option
                                v-for="item in wname"
                                :key="item"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
              </template>
    商品名称：<el-input v-model="pname" placeholder="请输入商品名称" class="input1" style="width: 10%"></el-input>
    <el-button type="success" plain @click="selectOne">搜索</el-button>
    <br>
    <el-table
            :data="checks"
            style="width: 100%">
        <el-table-column
                label="序号"
        >
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.id }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="商品编号"
        >
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.iomGoodsno }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="商品名称"
        >
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.iomGoods }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="仓库编号"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px"></span>
            </template>
        </el-table-column>
        <el-table-column
                label="仓库名称"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.iomName }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="批次"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.batch }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="现有数量"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px"></span>
            </template>
        </el-table-column>
        <el-table-column
                label="承诺数量"
                width="100">
            <template slot-scope="scope">
                <span style="margin-left: 10px"></span>
            </template>
        </el-table-column>
        <el-table-column
                label="可供数量"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px"></span>
            </template>
        </el-table-column>
        <el-table-column label="操作"  width="280">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        type="warning"
                        icon="el-icon-s-help"
                        @click="handleDetails(scope.$index, scope.row)"></el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="curr"
            :page-sizes="[5,10,15,20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
    <el-dialog title="详细信息" :visible.sync="dialogFormVisible" @close="closeMyDialog">
        <table>
            <tr>
                <td>商品编号：</td>
                <td>{{lookDetails.iomGoodsno}}</td>
                <td class="rightTd">&emsp;&emsp;&emsp;</td>
                <td>商品名称：</td>
                <td>{{lookDetails.iomGoods}}</td>
            </tr>
            <tr>
                <td>仓库名称：</td>
                <td>{{lookDetails.iomName}}</td>
                <td class="rightTd">&emsp;&emsp;&emsp;</td>
                <td>批次：</td>
                <td>{{lookDetails.batch}}</td>
            </tr>
        </table>
    </el-dialog>
</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                checks:null,
                lookDetails:{
                    iomGoodsno:'',
                    iomGoods:'',
                    iomName:'',
                    batch:''
                },
                dialogFormVisible:false,//控制对话框的显示
                curr:1,
                total:0,
                pageSize:5,
                ioNo:null,
                WName:null,
                pname:null,
                //仓库名称
                wname:[],
                formLabelWidth:'120px'//表单标签的宽度
            }
        },
        methods:{
            handleSizeChange(pageSize){
                console.log(`每页 ${pageSize} 条`);
                this.loadPage(this.curr,pageSize);
            },
            handleCurrentChange(curr){
                console.log(`当前页: ${curr}`);
                this.loadPage(curr,this.pageSize);
            },
            loadPage(curr,pageSize){
                this.curr=curr;
                this.pageSize = pageSize;
                axios.get("/checks?current="+curr+"&pageSize="+pageSize).then(value => {
                    if (value.data.code == 1){
                        this.checks = value.data.data.records;
                        this.curr = value.data.data.current;
                        this.pageSize = value.data.data.size;
                        this.total = value.data.data.total;
                    }
                })
            },
            selectOne(){
                axios.get("/checks/"+this.ioNo+"/"+this.WName+"/"+this.pname).then(value => {
                    this.checks = value.data.data;
                })
            },
            handleDetails(index,row){
                console.log(row.id)
                this.lookDetails = row;
                this.dialogFormVisible = true;
               /* axios.get("/lookDetails/"+row.id).then(value => {
                    if (value.data.code == 1){
                        this.lookDetails = value.data.data;
                        console.log(this.lookDetails);
                        this.dialogFormVisible = true;
                    }
                })*/
            },
            //关闭对话框
            closeMyDialog(){      //对话框数据
                this.lookDetails={
                    iomGoodsno:'',
                    iomGoods:'',
                    iomName:'',
                    batch:''
                }
            }
        },
        mounted(){
            //页面加载成功回调
            this.loadPage(1,5);
            //查询仓库名称
            axios.get("/wName").then(value => {
                this.wname=value.data.data;
            })
        }
    })
</script>
</body>
</html>